<template>
  <el-table
      border
      v-bind="$attrs"
      class="table"
      v-on="$listeners"
      ref="multipleTable"
  >
    <el-table-column v-if="showSelection" type="selection" align="center" width="55">
    </el-table-column>
    <el-table-column
        v-if="showIndex"
        type="index"
        label="序号"
        align="center"
        width="50"
    >
    </el-table-column>


    <template v-for="item in tableData">
      <el-table-column v-if="item.slot" :key="item.id" v-bind="item.attrs">
        <template slot-scope="scope">
          <slot :scope="scope" :name="item.slot"></slot>
        </template>
      </el-table-column>
      <el-table-column
          v-else
          :key="item.id"
          v-bind="item.attrs"
      ></el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  name: "",
  props: {
    showIndex: {
      type: Boolean,
      required: true
    },
    showSelection: {
      type: Boolean,
      required: true
    },
    tableData: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {};
  },
  methods: {
    getSlotName(column) {
      if (typeof column.render === "string") {
        return column.render;
      }
      return `${column.prop}-column`;
    }
  },
  mounted() {
    // console.log(this.tableData);
  }
};
</script>

<style scoped>
</style>
